<template>
	<!--设备设置-->
	<j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
		:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
		:cancelButtonProps="{ class:{'jee-hidden': disableSubmit} }" @cancel="handleCancel" cancelText="关闭" okText="保存">
		<!--表单-->
		<a-spin :spinning="confirmLoading">
			<j-form-container class="scroll-view" style="height: 600px">
				<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
					<a-row
						v-if="pageType === 'supplieredit' ||  pageType === 'supplierdetail' || pageType === 'teamedit' || pageType === 'teamdetail' || pageType === 'suppliereditfees' || pageType === 'teameditfees'  || pageType === 'supplierdetailfees' || pageType === 'teamdetailfees'">
						<a-col :span="24" v-if="pageType === 'supplieredit' ||  pageType === 'supplierdetail' || pageType === 'suppliereditfees' || pageType === 'supplierdetailfees'">
							<a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name"
								style="margin-bottom: 10px;">
								<a-input :disabled="disabled" v-model="model.name" placeholder="请输入供应商名称"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24" v-if="pageType === 'teamedit' || pageType === 'teamdetail' || pageType === 'teameditfees' || pageType === 'teamdetailfees'">
							<a-form-model-item label="班组名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name"
								style="margin-bottom: 10px;">
								<a-input :disabled="disabled" v-model="model.name" placeholder="请输入班组名称"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relation"
								style="margin-bottom: 10px;">
								<a-input :disabled="disabled" v-model="model.relation" placeholder="请输入联系人"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone"
								style="margin-bottom: 10px;">
								<a-input :disabled="disabled" v-model="model.phone" placeholder="请输入手机号码"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="基础评分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="score"
								style="margin-bottom: 10px;">
								<a-input :disabled="disabled" v-model="model.score" placeholder="请输入基础评分"></a-input>
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row style="margin:40px 0 20px 40px"
						v-if="pageType === 'supplieredit' || pageType === 'supplierdetail' || pageType === 'teamedit' || pageType === 'teamdetail' || pageType === 'suppliereditfees' || pageType === 'teameditfees'  || pageType === 'supplierdetailfees' || pageType === 'teamdetailfees'">
						<a-col :span="24">
							<span
								style="font-size: 16px; font-weight: bold;">{{pageType === 'supplieredit' || pageType === 'teamedit'?'修改评分记录':pageType === 'supplierdetail'|| pageType === 'teamdetail'?'运维评分记录': pageType === 'supplierdetailfees' || pageType === 'teamdetailfees'?'评分记录':pageType === 'suppliereditfees'|| pageType === 'teameditfees'?'缴费改分':''}}</span>
						</a-col>
					</a-row>

					<a-row v-if="pageType === 'supplieredit' || pageType === 'teamedit' ">
						<a-col :span="24">
							<a-form-model-item label="修改评分" :labelCol="labelCol" :wrapperCol="wrapperCol"
								prop="latestScore" style="margin-bottom: 10px;">
								<a-input v-model="params.latestScore" placeholder="请输入修改评分"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="修改评分说明" :labelCol="labelCol" :wrapperCol="wrapperCol"
								prop="content" style="margin-bottom: 10px;">
								<div style="position: relative;">
									<textarea v-model="params.content" cols="100" rows="3"
										style="width: 100%;padding: 10px;line-height: 25px;" maxlength="200"
										placeholder="请输入修改评分说明" placeholder-type="color:#999"></textarea>
									<div
										style="position: absolute;right: -50px;bottom: 10px;font-size: 12px;color:#999">
										{{params.content.length}}/200
									</div>
								</div>
							</a-form-model-item>
						</a-col>
					</a-row>
					<a-row v-if="pageType === 'supplierdetail' || pageType === 'teamdetail' || pageType === 'supplierdetailfees' || pageType === 'teamdetailfees'">
						<a-col :span="24">
							<a-table :columns="columns" :dataSource="scoreList" :pagination="ipagination" bordered
								rowKey="id" style="margin: 0 auto;width: 75%;" @change="handleTableChange"></a-table>
						</a-col>
					</a-row>
					
					<a-row v-if="pageType === 'supplierrecord' || pageType === 'teamrecord'">
						<a-col :span="24">
							<a-table :columns="columns1" :dataSource="scoreList" :pagination="ipagination" bordered
								rowKey="id" style="margin: 0 auto;width: 100%;" @change="handleTableChange">
									<template slot="evidencePaymentUrl" slot-scope="text,record">
									  <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
									  <imgs-preview v-else :imgs="text" imgH="25px"></imgs-preview>
									</template>
							</a-table>
						</a-col>
					</a-row>
					
					<a-row style="margin:40px 0 20px 40px"
						v-if="pageType === 'supplierdetail' || pageType === 'teamdetail'">
						<a-col :span="24">
							<span
								style="font-size: 16px; font-weight: bold;">{{pageType === 'supplierdetail'|| pageType === 'teamdetail'?'采购商评分记录':''}}</span>
						</a-col>
					</a-row>

					<a-row v-if="pageType === 'suppliereditfees' || pageType === 'teameditfees'">
						<a-col :span="24">
							<a-form-model-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="money"
								style="margin-bottom: 10px;">
								<a-input v-model="params.money" placeholder="请输入缴费金额"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上传付款凭证" hasFeedback
								style="margin-bottom: 10px;">
								<j-image-upload text="上传" v-model="params.evidencePaymentUrl"
									:isMultiple="true"></j-image-upload>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="修改评分" :labelCol="labelCol" :wrapperCol="wrapperCol"
								prop="score" style="margin-bottom: 10px;">
								<a-input v-model="params.score" placeholder="请输入修改评分"></a-input>
							</a-form-model-item>
						</a-col>
						<a-col :span="24">
							<a-form-model-item label="修改评分说明" :labelCol="labelCol" :wrapperCol="wrapperCol"
								prop="content" style="margin-bottom: 10px;">
								<div style="position: relative;">
									<textarea v-model="params.content" cols="100" rows="3"
										style="width: 100%;padding: 10px;line-height: 25px;" maxlength="200"
										placeholder="请输入修改评分说明" placeholder-type="color:#999"></textarea>
									<div
										style="position: absolute;right: -50px;bottom: 10px;font-size: 12px;color:#999">
										{{params.content.length}}/200
									</div>
								</div>
							</a-form-model-item>
						</a-col>
					</a-row>
				</a-form-model>
			</j-form-container>
		</a-spin>
		<score-detail ref="modalForm" @ok="modalFormOk"></score-detail>
	</j-modal>
</template>
<script>
	import {
		httpAction,
		getAction,
		postAction
	} from '@/api/manage'
	import ScoreDetail from './ScoreDetail.vue'
	import {
		filterObj
	} from '@/utils/util';
	//import {JeecgListMixin} from '@/mixins/JeecgListMixin'
	export default {
		name: 'WtDevicetypeModal',
		//mixins: [JeecgListMixin],
		components: {
			ScoreDetail
		},
		data() {
			return {
				title: '',
				width: 800,
				visible: false,
				disableSubmit: false,
				disabled: true,
				//表单
				confirmLoading: false,
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					}
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					}
				},
				labelCol2: {
					xs: {
						span: 24
					},
					sm: {
						span: 2
					}
				},
				wrapperCol2: {
					xs: {
						span: 24
					},
					sm: {
						span: 22
					}
				},
				validatorRules: {},
				model: {},
				params: {
					rateeId: '',
					rateeType: '',
					latestScore: '',
					content: '',
					valuatorType: '',
					money:'',
					evidencePaymentUrl:'',
					score:'',
				},
				pageType: '', //supplieredit-供应商评分编辑 supplierdetail-供应商评分列表 
				url: {
					add: '/score/wtScoreRecordDetail/add',
					add2: '/score/wtScorePaymentRecord/add',
					edit: '',
					list: '/score/wtScoreRecordDetail/list',
					list2: '/score/wtScoreRecord/list',
					detail: '',
					delete: '',
				},
				columns: [{
						title: '评分时间',
						dataIndex: 'createTime',
						key: 'createTime',
						align: 'center',
						width: '30%',
					},
					{
						title: '修改评分',
						dataIndex: 'latestScore',
						key: 'latestScore',
						align: 'center',
						width: '20%',
					},
					{
						title: '评分说明',
						dataIndex: 'content',
						key: 'content',
						align: 'center',
						width: '50%',
					}
				],
				columns1: [{
						title: '缴费改分时间',
						dataIndex: 'createTime',
						key: 'createTime',
						align: 'center',
						width: '20%',
					},
					{
						title: '缴费金额',
						dataIndex: 'money',
						key: 'money',
						align: 'center',
						width: '15%',
					},
					{
						title: '缴费凭证',
						dataIndex: 'evidencePaymentUrl',
						key: 'evidencePaymentUrl',
						align: 'center',
						width: '25%',
						scopedSlots: {
						  customRender: 'evidencePaymentUrl'
						}
					},
					{
						title: '缴费前分数',
						dataIndex: 'oldScore',
						key: 'oldScore',
						align: 'center',
						width: '20%',
					},
					{
						title: '缴费后分数',
						dataIndex: 'score',
						key: 'score',
						align: 'center',
						width: '20%',
					}
				],
				columns2: [{
						title: '采购商名称',
						dataIndex: 'valuatorName',
						key: 'valuatorName',
						align: 'center',
					},
					{
						title: '最新评分',
						dataIndex: 'latestScore',
						key: 'latestScore',
						align: 'center',
					},
					{
						title: '操作',
						dataIndex: 'action',
						align: 'center',
						scopedSlots: {
							customRender: 'action'
						},
					},
				],
				scoreList: [],
				scoreList2: [],
				ipagination: {
					current: 1,
					pageSize: 5,
					pageSizeOptions: ['5', '10', '20', '30'],
					showTotal: (total, range) => {
						return range[0] + "-" + range[1] + " 共" + total + "条"
					},
					showQuickJumper: true,
					showSizeChanger: true,
					total: 0
				},
				ipagination2: {
					current: 1,
					pageSize: 5,
					pageSizeOptions: ['5', '10', '20', '30'],
					showTotal: (total, range) => {
						return range[0] + "-" + range[1] + " 共" + total + "条"
					},
					showQuickJumper: true,
					showSizeChanger: true,
					total: 0
				},
				queryParam: {},
				/* 排序参数 */
				isorter: {
					column: 'createTime',
					order: 'desc',
				},
				/* 筛选参数 */
				filters: {},
				/* table加载状态 */
				loading: false,

			}
		},
		methods: {
			getQueryParams() {
				//获取查询条件
				let sqp = {}
				if (this.superQueryParams) {
					sqp['superQueryParams'] = encodeURI(this.superQueryParams)
					sqp['superQueryMatchType'] = this.superQueryMatchType
				}

				if (!!this.is_localstorage) {
					let localName = this.is_localstorage;
					let queryParam = JSON.parse(localStorage.getItem(localName));
					if (!!queryParam) {
						this.queryParam = queryParam;
					}
				}
				var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
				param.field = this.getQueryField();
				param.pageNo = this.ipagination.current;
				param.pageSize = this.ipagination.pageSize;
				return filterObj(param);
			},
			getQueryParams2() {
				//获取查询条件
				let sqp = {}
				if (this.superQueryParams) {
					sqp['superQueryParams'] = encodeURI(this.superQueryParams)
					sqp['superQueryMatchType'] = this.superQueryMatchType
				}

				if (!!this.is_localstorage) {
					let localName = this.is_localstorage;
					let queryParam = JSON.parse(localStorage.getItem(localName));
					if (!!queryParam) {
						this.queryParam = queryParam;
					}
				}
				var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
				param.field = this.getQueryField();
				param.pageNo = this.ipagination2.current;
				param.pageSize = this.ipagination2.pageSize;
				return filterObj(param);
			},
			getQueryField() {
				//TODO 字段权限控制
				var str = "id,";
				if (this.columns && this.columns.length > 0) {
					this.columns.forEach(function(value) {
						str += "," + value.dataIndex;
					});
				}
				return str;
			},
			//分页1
			handleTableChange(pagination, filters, sorter) {
				//分页、排序、筛选变化时触发
				//TODO 筛选
				console.log(1, pagination)
				if (Object.keys(sorter).length > 0) {
					this.isorter.column = sorter.field;
					this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
				}
				this.ipagination = pagination;
				this.getDetail();
			},
			//分页2
			handleTableChange2(pagination, filters, sorter) {
				//分页、排序、筛选变化时触发
				//TODO 筛选
				console.log(2, pagination)
				if (Object.keys(sorter).length > 0) {
					this.isorter.column = sorter.field;
					this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
				}
				this.ipagination2 = pagination;
				this.getDetail();
			},
			handleDetail(record, type) {
				this.$refs.modalForm.title = '评分明细';
				this.$refs.modalForm.disableSubmit = true;
				this.$refs.modalForm.pageType = type;
				this.$refs.modalForm.edit(record);
			},
			//下拉选择
			handleChange(type, item, index) {
				console.log(1, type, item, index);
				let _self = this;
			},
			//获取数据字典列表
			getDetail(arg) {
				var _self = this;
				//加载数据 若传入参数1则加载第一页的内容
				if (arg === 1) {
					this.ipagination.current = 1;
					this.ipagination2.current = 1;
				}
				var params = this.getQueryParams(); //查询条件
				params.rateeId = this.model.id;
				params.valuatorType = '1';
				//运维评分记录
				getAction(`/score/wtScoreRecordDetail/list`, params).then((res) => {
					if (res.success) {
						//update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
						this.scoreList = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination.total = res.result.total;
						} else {
							this.ipagination.total = 0;
						}
						this.$forceUpdate();
						//update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
					} else {
						this.$message.warning(res.message)
					}
				})
				var params2 = this.getQueryParams2(); //查询条件
				params2.rateeId = this.model.id;
				params2.valuatorType = '2';
				//采购商评分记录
				getAction(`/score/wtScoreRecord/list`, params2).then((res) => {
					if (res.success) {
						//update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
						this.scoreList2 = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination2.total = res.result.total;
						} else {
							this.ipagination2.total = 0;
						}
						this.$forceUpdate();
						//update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
					} else {
						this.$message.warning(res.message)
					}
				})
			},
			//获取数据字典列表
			getDetail2(arg) {
				var _self = this;
				//加载数据 若传入参数1则加载第一页的内容
				if (arg === 1) {
					this.ipagination.current = 1;
				}
				var params = this.getQueryParams(); //查询条件
				params.orgId = this.model.id;
				//运维评分记录
				getAction(`/score/wtScorePaymentRecord/list`, params).then((res) => {
					if (res.success) {
						//update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
						this.scoreList = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination.total = res.result.total;
						} else {
							this.ipagination.total = 0;
						}
						this.$forceUpdate();
						//update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
					} else {
						this.$message.warning(res.message)
					}
				})
			},
			add() {
				this.visible = true;
			},
			edit(record) {
				console.log(11, record)
				this.visible = true;
				if (this.pageType === 'supplieredit' || this.pageType === 'teamedit' || this.pageType === 'suppliereditfees' || this.pageType === 'teameditfees') {
					this.model = record;
				} else if (this.pageType === 'supplierdetail' || this.pageType === 'teamdetail' || this.pageType === 'supplierdetailfees' || this.pageType === 'teamdetailfees') {
					this.model = record;
					this.getDetail();
				} else if(this.pageType === 'supplierrecord' || this.pageType === 'teamrecord'){
					this.model = record;
					this.getDetail2();
				}
			},
			close() {
				this.$emit('close');
				this.visible = false;
			},
			init() {
				this.params = {
					rateeId: '',
					rateeType: '',
					latestScore: '',
					content: '',
					valuatorType: '',
				}
			},
			handleOk() {
				const _self = this;
				let params = this.params;
				let httpurl = '';
				if (_self.pageType === 'supplieredit') {
					httpurl = _self.url.add;
					params.rateeId = _self.model.id;
					params.rateeType = '1';
					params.valuatorType = '1';
				} else if (_self.pageType === 'teamedit') {
					httpurl = _self.url.add;
					params.rateeId = _self.model.id;
					params.rateeType = '4';
					params.valuatorType = '1';
				}else if (_self.pageType === 'suppliereditfees') {
					httpurl = _self.url.add2;
					params.orgId = _self.model.id;
					params.type = '0';
					params.money = _self.params.money;
					params.evidencePaymentUrl = _self.params.evidencePaymentUrl;
					params.score = _self.params.score;
					params.content = _self.params.content;
				} else if (_self.pageType === 'teameditfees') {
					httpurl = _self.url.add2;
					params.orgId = _self.model.id;
					params.type = '1';
					params.money = _self.params.money;
					params.evidencePaymentUrl = _self.params.evidencePaymentUrl;
					params.score = _self.params.score;
					params.content = _self.params.content;
				}
				// 触发表单验证
				_self.confirmLoading = true;
				console.log('提交表单', params)
				// debugger
				httpAction(httpurl, params, 'POST')
					.then((res) => {
						if (res.success) {
							_self.$message.success(res.message);
							_self.close();
							_self.init();
							_self.$emit('ok');
						} else {
							_self.$message.warning(res.message)
						}
					})
					.finally(() => {
						_self.confirmLoading = false
					})
			},
			submitCallback() {
				this.$emit('ok');
				this.visible = false;
			},
			handleCancel() {
				this.close()
			}
		}
	}
</script>
<style scoped>
	.scroll-view {
		overflow: auto;
		overflow-y: scroll;
	}
</style>